<template>
  <div>
    <!--登录卡片-->
    <transition name="fade" appear>
      <el-card class="box-card" shadow="always">
        <el-tabs v-model="activeName" type="card">
          <!--考生登录部分-->
          <el-tab-pane label="考生登录" name="examinee">
            <el-form :model="examineeInfo" class="elmt-10" :rules="rulesLogin" ref="stuInfo">
              <el-form-item label="学号" prop="schoolNum">
                <el-input
                  placeholder="请输入学号"
                  v-model="examineeInfo.schoolNum"
                  prefix-icon="el-icon-user-solid"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  placeholder="请输入密码"
                  v-model="examineeInfo.password"
                  prefix-icon="el-icon-lock"
                  show-password
                ></el-input>
              </el-form-item>
              <el-checkbox v-model="remember" style="margin-left: 10px;">记住我</el-checkbox>
              <el-link type="info">忘记密码</el-link>
              <br />
              <el-button type="primary" class="examinee-login" @click="studentLogin('stuInfo')">登录</el-button>
              <span class="elva-bt">没有账号？</span>
              <el-link type="primary" @click="toggleCard" class="elva-bt">立即注册</el-link>
            </el-form>
          </el-tab-pane>
          <!--考生登录END-->
          <!--教师登录部分-->
          <el-tab-pane label="教师登录" name="teachers">
            <el-form :model="teachersInfo" class="elmt-10" ref="teacherInfo">
              <el-form-item label="编号">
                <el-input
                  placeholder="请输入编号"
                  v-model="teachersInfo.serialNum"
                  prefix-icon="el-icon-s-custom"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  placeholder="请输入密码"
                  v-model="teachersInfo.password"
                  prefix-icon="el-icon-lock"
                  show-password
                ></el-input>
              </el-form-item>
              <el-button type="primary" class="teachers-login">登录</el-button>
            </el-form>
          </el-tab-pane>
          <!--教师登录END-->
        </el-tabs>
      </el-card>
    </transition>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      activeName: "examinee", // tabs选项卡默认选中考生登录
      remember: false, // 考生按钮状态-记住我
      examineeInfo: {
        schoolNum: "", // 考生学号
        password: "" // 考生密码
      },
      teachersInfo: {
        serialNum: "", // 教师编号
        password: "" // 教师密码
      },
      rulesLogin: {
        schoolNum: { required: true, message: "请输入学号", trigger: "blur" },
        password: { required: true, message: "请输入密码", trigger: "blur" }
      }
    };
  },
  methods: {
    // 卡片切换-注册/登录互换
    toggleCard() {
      this.$emit("toggle");
    },
    // 学生登录
    studentLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios.post("/api/login", this.examineeInfo).then(res => {
            if (res.data) {
              this.$message.success("登录成功!");
              this.$router.push("/entersys");
            } else {
              this.$message.error("学号或密码错误");
            }
          });
        }
      });
    }
  }
};
</script>
<style  scoped>
/*卡片*/
.box-card {
  width: 320px;
  height: 350px;
  position: absolute;
  right: 80px;
}
/*考生登录按钮*/
.examinee-login {
  margin: 20px 10px 0px;
}
/*教师登录按钮*/
.teachers-login {
  width: 90%;
  margin: 0px 18px;
}

/*vue组件过渡动画*/
.fade-enter-active {
  -webkit-animation: bounceIn 1s 0.2s ease both;
}
/*自定义动画*/
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
</style>
<style>
.el-form-item {
  display: flex;
  flex-direction: row;
}
.el-form-item__label {
  width: 80px;
}
</style>